<template>
  <div class="list-container" id="migrationList">
    <div class="search-con">
      <a-form :model="form" layout="inline">
        <a-form-item field="taskName" style="margin-left: -17px;">
          <a-input v-model="form.taskName" allow-clear :placeholder="$t('list.index.5q08sf2dez80')" style="width: 200px;"
            @change="getList"></a-input>
        </a-form-item>
        <a-form-item field="createUser" style="margin-left: -17px;">
          <a-select v-model="form.createUser" :placeholder="$t('list.index.5q08sf2dgxo0')" allow-clear
            style="width: 150px;" @change="getList">
            <a-option v-for="item in userData" :key="item" :value="item">{{ item }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="execStatus" style="margin-left: -17px;">
          <a-select v-model="form.execStatus" :placeholder="$t('list.index.5q08sf2dh5g0')" allow-clear
            style="width: 150px;" @change="getList">
            <a-option :value="3000">{{ $t('list.index.5q08sf2dha81') }}</a-option>
            <a-option :value="0">{{ $t('list.index.5q08sf2dha80') }}</a-option>
            <a-option :value="1">{{ $t('list.index.5q08sf2dhek0') }}</a-option>
            <a-option :value="2">{{ $t('list.index.5q08sf2dhj00') }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="execTime" style="margin-left: -17px;">
          <a-range-picker v-model="form.execTime"
            :placeholder="[$t('list.index.5q08sf2dhng0'), $t('list.index.5q08sf2dhrk0')]" style="width: 250px;"
            @change="getList" />
        </a-form-item>
        <a-form-item field="finishTime" style="margin-left: -17px;">
          <a-range-picker v-model="form.finishTime"
            :placeholder="[$t('list.index.5q08sf2dhvs0'), $t('list.index.5q08sf2di4w0')]" style="width: 250px;"
            @change="getList" />
        </a-form-item>
        <a-form-item>
          <a-button type="outline" @click="getList">
            <template #icon>
              <icon-search />
            </template>
            <template #default>{{ $t('list.index.5q08sf2dikw0') }}</template>
          </a-button>
          <a-button style="margin-left: 10px;" @click="resetQuery">
            <template #icon>
              <icon-sync />
            </template>
            <template #default>{{ $t('list.index.5q08sf2diqs0') }}</template>
          </a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="btn-con">
      <a-space>
        <a-button type="primary" @click="createTask">
          <template #icon>
            <icon-plus />
          </template>
          <template #default>{{ $t('list.index.5q08sf2diwc0') }}</template>
        </a-button>
        <a-button status="success" @click="getList">
          <template #icon>
            <icon-sync />
          </template>
          <template #default>{{ $t('list.index.5q08sf2dj240') }}</template>
        </a-button>
        <a-button status="warning" @click="deleteMore">
          <template #icon>
            <icon-delete />
          </template>
          <template #default>{{ $t('list.index.5q08sf2dj5g0') }}</template>
        </a-button>
      </a-space>
    </div>
    <div class="table-con">
      <a-table :loading="loading" row-key="id" :data="tableData" :row-selection="rowSelection"
        v-model:selectedKeys="selectedKeys" :bordered="false" :stripe="!currentTheme" :hoverable="!currentTheme"
        :pagination="pagination" @page-change="pageChange">
        <template #columns>
          <a-table-column :title="$t('list.index.5q08sf2dj8k0')" data-index="taskName" :width="220" fixed="left" ellipsis
            tooltip></a-table-column>
          <a-table-column :title="$t('list.index.5q08sf2djbk0')" data-index="createUser" :width="100"></a-table-column>
          <a-table-column :title="$t('list.index.5q08sf2djew0')" data-index="execStatus" :width="120">
            <template #cell="{ record }">
              {{ execStatusMap(record.execStatus) }}
            </template>
          </a-table-column>
          <a-table-column :title="$t('list.index.5q08sf2djks0')" data-index="execProgress" :width="150">
            <template #cell="{ record }">
              <a-progress :percent="record.execStatus === 2 ? 1 : (+record.execProgress || 0)" />
            </template>
          </a-table-column>
          <a-table-column :title="$t('list.index.5q08sf2djoo0')" :width="150">
            <template #cell="{ record }">
              {{ calcTime(record) }}
            </template>
          </a-table-column>
          <a-table-column :title="$t('list.index.5q08sf2djt00')" data-index="createTime" :width="200"></a-table-column>
          <a-table-column :title="$t('list.index.5q08sf2dhng0')" data-index="execTime" :width="200"></a-table-column>
          <a-table-column :title="$t('list.index.5q08sf2djvk0')" data-index="finishTime" :width="200"></a-table-column>
          <a-table-column :title="$t('list.index.5q08sf2djyc0')" align="center" :width="300" fixed="right">
            <template #cell="{ record }">
              <a-button size="mini" type="text" @click="goDetail(record)">
                <template #icon>
                  <icon-edit />
                </template>
                <template #default>{{ $t('list.index.5q08sf2dk0o0') }}</template>
              </a-button>
              <a-popconfirm v-if="record.execStatus === 1 || record.execStatus === 3000"
                :content="$t('list.index.endMigration')" @ok="stopTask(record)">
                <a-button size="mini" type="text">
                  <template #icon>
                    <icon-pause />
                  </template>
                  <template #default>{{ $t('list.index.5q08sf2dk3c0') }}</template>
                </a-button>
              </a-popconfirm>
              <a-button v-if="record.execStatus === 0" :loading="record.startLoading" size="mini" type="text"
                @click="startTask(record)">
                <template #icon>
                  <icon-play-arrow />
                </template>
                <template #default>{{ $t('list.index.5q08sf2dk5s0') }}</template>
              </a-button>
              <a-popconfirm v-if="record.execStatus === 0 || record.execStatus === 2"
                :content="$t('list.index.5q08sf2dk800')" @ok="deleteTheTask(record)">
                <a-button size="mini" type="text">
                  <template #icon>
                    <icon-delete />
                  </template>
                  <template #default>{{ $t('list.index.5q08sf2dka40') }}</template>
                </a-button>
              </a-popconfirm>
              <a-popconfirm v-if="record.execStatus === 2" :content="$t('list.index.resetConfirm')" @ok="resetTask(record)">
                <a-button :loading="record.startLoading" size="mini" type="text">
                  <template #icon>
                    <icon-refresh />
                  </template>
                  <template #default>{{ $t('list.index.5q08sf2diqs0') }}</template>
                </a-button>
              </a-popconfirm>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import { list, start, stop, reset, deleteTask, userList } from '@/api/list'
import dayjs from 'dayjs'
import useTheme from '@/hooks/theme'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const { currentTheme } = useTheme()

const loading = ref(true)

const form = reactive({
  taskName: undefined,
  createUser: undefined,
  execStatus: undefined,
  execTime: undefined,
  finishTime: undefined
})

const userData = ref([])

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10
})

const pagination = reactive({
  total: 0,
  current: 1,
  pageSize: 10
})

const tableData = ref([])
const selectedKeys = ref([])
const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  onlyCurrent: false
})

// status map
const execStatusMap = (status) => {
  const maps = {
    0: t('list.index.5q08sf2dha80'),
    1: t('list.index.5q08sf2dhek0'),
    2: t('list.index.5q08sf2dhj00'),
    3000: t('list.index.5q08sf2dha81')
  }
  return maps[status]
}

// get task list data
const getList = () => {
  loading.value = true
  list({
    taskName: form.taskName,
    createUser: form.createUser,
    execStatus: form.execStatus,
    execStartTime: form.execTime ? form.execTime[0] + ' 00:00:00' : undefined,
    execEndTime: form.execTime ? form.execTime[1] + ' 23:59:59' : undefined,
    finishStartTime: form.finishTime ? form.finishTime[0] + ' 00:00:00' : undefined,
    finishEndTime: form.finishTime ? form.finishTime[1] + ' 23:59:59' : undefined,
    ...queryParams
  }).then(res => {
    loading.value = false
    tableData.value = res.rows.map(item => ({ ...item, disabled: item.execStatus === 1 }))
    pagination.total = res.total
  }).catch(() => {
    loading.value = false
  })
}

const resetQuery = () => {
  form.taskName = undefined
  form.createUser = undefined
  form.execStatus = undefined
  form.execTime = undefined
  form.finishTime = undefined
  getList()
}

const pageChange = current => {
  queryParams.pageNum = current
  pagination.current = current
  getList()
}

const calcTime = row => {
  if (row.execStatus === 1 || row.execStatus === 2) {
    const seconds = row.finishTime ? dayjs(row.finishTime).diff(dayjs(row.execTime), 'seconds')
      : dayjs(row.currentTime).diff(dayjs(row.execTime), 'seconds')
    const hour = parseInt(seconds / 3600)
    const minute = parseInt((seconds - hour * 3600) / 60)
    return `${hour ? hour + t('list.index.5q08sf2dkc80') : ''} ${minute ? minute + t('list.index.5q08sf2dkek0') : ''}`
  } else {
    return ''
  }
}

// jump to the page of task-config
const createTask = () => {
  window.$wujie?.props.methods.jump({
    name: `Static-pluginData-migrationTaskConfig`
  })
}

// start task
const startTask = async row => {
  try {
    row.startLoading = true
    await start(row.id)
    Message.success('Start success')
    row.startLoading = false
  } catch (e) {
    row.startLoading = false
  }
  getList()
}

// stop task
const stopTask = async row => {
  try {
    await stop(row.id)
    Message.success('Stop success')
  } catch (e) {
    Message.warning('Abnormal stop')
  }
  getList()
}
// reset task
const resetTask = async row => {
  await reset(row.id)
  Message.success('Reset success')
  getList()
}

// remove a task
const deleteTheTask = async row => {
  await deleteTask(row.id)
  window.$wujie?.bus.$emit('opengauss-close-special-tab', {
    fullPath: `/static-plugin/data-migration/taskDetail?id=${row.id}`
  })
  window.$wujie?.bus.$emit('opengauss-close-special-tab', {
    fullPath: `/static-plugin/data-migration/taskConfig?id=${row.id}`
  })
  selectedKeys.value = []
  Message.success('Delete success')
  if (tableData.value.length === 1 && queryParams.pageNum !== 1) {
    queryParams.pageNum--
  }
  getList()
}

// remove more tasks
const deleteMore = async () => {
  if (!selectedKeys.value.length) {
    Message.error('Please select at least one piece of data')
    return
  }
  await deleteTask(selectedKeys.value.join(','))
  selectedKeys.value.forEach(item => {
    window.$wujie?.bus.$emit('opengauss-close-special-tab', {
      fullPath: `/static-plugin/data-migration/taskDetail?id=${item}`
    })
    window.$wujie?.bus.$emit('opengauss-close-special-tab', {
      fullPath: `/static-plugin/data-migration/taskConfig?id=${item}`
    })
  })
  if (tableData.value.length === selectedKeys.value.length && queryParams.pageNum !== 1) {
    queryParams.pageNum--
  }
  selectedKeys.value = []
  Message.success('Delete success')
  getList()
}

// get user data
const getUserList = () => {
  userList().then(res => {
    userData.value = res.data
  })
}

// jump to the page of task-detail
const goDetail = row => {
  if (row.execStatus === 0) {
    window.$wujie?.props.methods.jump({
      name: `Static-pluginData-migrationTaskConfig`,
      query: {
        id: row.id
      }
    })
  } else {
    window.$wujie?.props.methods.jump({
      name: `Static-pluginData-migrationTaskDetail`,
      query: {
        id: row.id
      }
    })
  }
}

onMounted(() => {
  getList()
  getUserList()
  window.$wujie?.bus.$on('data-migration-update', () => {
    getList()
  })
})
</script>

<style lang="less" scoped>
.list-container {
  position: relative;
  min-height: calc(100vh - 114px);

  .search-con {
    padding: 16px 20px 10px;
    display: flex;
    justify-content: space-between;
  }

  .btn-con {
    padding: 0 20px;
  }

  .table-con {
    margin-top: 20px;
    padding: 0 20px 30px;
  }
}
</style>
